<template>
  <div class="app-container">
    <div class="upd-box">
      <div class="upd-title">密码修改</div>
      <div class="upd-pass-form-div">
        <!-- size用于控制该表单内组件的尺寸值为medium / small / mini -->
        <el-form ref="updForm" :model="form" :rules="updRules" :label-position="labelPosition" label-width="100px" style="width:300px">
          <el-form-item label="当前密码" prop="currentPassword">
            <el-input ref="currentPassword" v-model="form.currentPassword" type="password" placeholder="请输入当前密码" tabindex="1" />
          </el-form-item>
          <el-form-item label="新密码" prop="newPassword">
            <el-input ref="newPassword" v-model="form.newPassword" type="password" maxlength="16" placeholder="请输入新密码" tabindex="2" />
          </el-form-item>
          <el-form-item label="确认密码" prop="confirmPassword">
            <el-input ref="confirmPassword" v-model="form.confirmPassword" type="password" placeholder="请再次输入新密码" tabindex="3" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="updPassword">确认修改</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'UpdPassword',
  data() {
    const Password = (rule, value, callback) => {
      if (!value) {
        callback(new Error('密码不能为空!'))
      } else {
        callback()
      }
    }
    const NewPassword = (rule, value, callback) => {
      if (!value) {
        callback(new Error('密码不能为空!'))
      } else if (value.length < 6) {
        callback(new Error('请输入6到16字符的密码!'))
      } else if (value === this.form.currentPassword) {
        callback(new Error('新密码不能与原密码一样!'))
      } else {
        callback()
      }
    }
    const confirmPassword = (rule, value, callback) => {
      if (!value) {
        callback(new Error('密码不能为空!'))
      } else if (value !== this.form.newPassword) {
        callback(new Error('两次密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      form: {
        currentPassword: '',
        newPassword: '',
        confirmPassword: ''
      },
      updRules: {
        currentPassword: [{ required: true, trigger: 'blur', validator: Password }],
        newPassword: [{ required: true, trigger: 'blur', validator: NewPassword }],
        confirmPassword: [{ required: true, trigger: 'blur', validator: confirmPassword }]
      },
      labelPosition: 'right' // label对齐方式，可选值为right、top、left
    }
  },
  computed: {},
  mounted() {
    // if (this.form.currentPassword === '') {
    //   this.$refs.currentPassword.focus()
    // } else if (this.form.newPassword === '') {
    //   this.$refs.newPassword.focus()
    // } else if (this.form.confirmPassword === '') {
    //   this.$refs.confirmPassword.focus()
    // }
  },
  methods: {
    // 修改密码
    updPassword() {
      this.$refs.updForm.validate(valid => {
        if (valid) {
          this.$store.dispatch('user/updPassword', this.form).then(res => {
            if (res.state) {
              this.$message({ message: res.msg, type: 'success' })
              setTimeout(() => {
                this.$router.push({ path: '/login' })
              }, 2000)
            } else {
              this.$message.error(res.msg)
            }
          }).catch(() => {})
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.upd-box{
  border: 1px solid #f2f2f2;
  border-radius: 3px;
  box-shadow: 0 1px 1px 0 rgba(0,0,0,.12);
  background: #fff;

  .upd-title{
    font-size: 15px;
    color: #333;
    padding: 15px;
    border-bottom: 1px solid #f2f2f2;
  }
}
</style>

<style lang="scss"> // element-ui样式修改
.upd-pass-form-div{
  padding: 15px 40px;
  label{
      font-weight: 500;
  }
  .el-form-item__label{
      text-align: right;
      vertical-align: middle;
      float: left;
      font-size: 15px;
      color: #333;
      line-height: 40px;
      padding: 0 12px 0 0;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
  }
  .el-form-item--medium .el-form-item__label{
    line-height: 36px;
  }
  .el-form-item--small .el-form-item__label{
    line-height: 32px;
  }
  .el-form-item--mini .el-form-item__label{
    line-height: 28px;
  }
}
</style>
